<template>
	<view>
		<view class="search">
			<u--input v-model="query.searchValue" placeholder="主题关键词" :clearable="true" prefixIcon="search"
				prefixIconStyle="font-size: 22px;color: #909399" @clear="getList()">
				<template slot="suffix">
					<view class="search_btn" @click="getList()"> 搜索</view>
				</template></u--input>
		</view>
		<view class="box" v-for=" (v,i) in datas" :key="i">
			<div @click="jumpTo('/pages/rationalizationSuggestions/detatl',{
				id:v.id
			})">
			<view class="box_item" style="margin-top: 0;">
				<view class="box_label">主题：</view>
				<view class="box_value">{{v.title}}</view>
			</view>
			<view class="box_item">
				<view class="box_label">部门：</view>
				<view class="box_value">{{v.deptStr}}</view>
			</view>
			<view class="box_item">
				<view class="box_label">建议人：</view>
				<view class="box_value">{{v.createUserStr}}</view>
			</view>
			<view class="box_item">
				<view class="box_label">创建时间：</view>
				<view class="box_value">{{v.createDate}}</view>
			</view>
			</div>
			<view class="box_item_btn">
				<view class="box_item_btn_right" style="margin-right: 18rpx;" @click="edit(v)">
					编辑
				</view>
				<view class="box_item_btn_left " style="background-color: #F56C6C;" @click="del(v)"> 删除</view>
			</view>
		</view>
		<u-empty mode="list" v-if="datas.length<=0" marginTop="80">
		</u-empty>
		<div class="btnAdd" @click="btnAdd()">
			新增
		</div>
		<!-- 新增或者修改 -->
		<u-popup :show="show" mode="center" :round="10">
			<div class="block">
				<div class="block_box">
					<div class="block_item">
						<div class="block_label">
							主题:
						</div>
						<div class="block_val">
							<input type="text" v-model="form.title" placeholder="请输入" class="input" />
						</div>
					</div>
					<div class="block_item">
						<div class="block_label">
							部门:
						</div>
						<div class="block_val">
							<div type="text" style="min-height: 40rpx;" placeholder="请输入" class="input"
								@click="treeAdd">{{form.deptStr}}</div>
						</div>
					</div>
					<div class="block_item">
						<div class="block_label">
							内容:
						</div>
						<div class="block_val">
							<textarea maxlength='-1' v-model="form.content" type="textarea" placeholder="请输入"
								class="textarea" />
						</div>
					</div>
					<div class="block_item">
						<div class="block_label">
							附件:
						</div>
						<div class="block_val">
							<view class="item_upload" @click="upload" v-if="!form.fileUrl">上传附件</view>
							<view v-if="form.fileUrl" @click="upload" class="textName">{{form.fileUrl}}</view>
							<!-- <textarea maxlength='-1' type="textarea"  placeholder="请输入" class="textarea" /> -->
						</div>
					</div>
				</div>

				<view class="block_btn flex align-items">
					<view class="block_btn_left" @click="show =false">取消</view>
					<view class="block_btn_right" @click="comit">确认</view>
				</view>
			</div>
		</u-popup>
		<helangcompress ref="helangCompress"></helangcompress>
		<tree ref="tree" @comit="treeComit" :treeData="treeData" :type="4"></tree>
	</view>
</template>

<script>
	import {
		adviseList,
		adviseGetInfo,
		adviseAdd,
		adviseEdit ,
		adviseRemove
	} from '@/api/rationalizationSuggestions.js'
	import {
		getListDeptForZTree,
	} from '@/api/lssue.js'
	import helangcompress from '@/components/helang-compress/helang-compress.vue'
	import urlConfig from "@/request/urlConfig.js";
	export default {
		components: {
			helangcompress
		},
		data() {
			return {
				baseUrl: urlConfig.baseURL,
				query: {
					searchValue: '',
					orderNumber: '',
					queryType: 4
				},
				datas: [],
				options: [],
				show: false,
				form: {

				},
				treeData: []
			};
		},
		watch: {

		},
		onLoad() {
			const page = getCurrentPages()
			console.log(page[0].route); // 打印当前页面栈
			console.log(this.$mp.query, "query");
			if (this.$mp.query.token) {
				uni.setStorageSync('token', this.$mp.query.token)
			}

		},
		onShow() {
			this.getList()
			this.getDept()

		},
		methods: {
			comit() {
				if (!this.form.title) return uni.$u.toast('请填写主题')
				if (!this.form.deptId) return uni.$u.toast('请选择部门')
				if (!this.form.content) return uni.$u.toast('请填写内容')
				if (!this.form.fileUrl) return uni.$u.toast('请上传附件')
				if(!this.form.id){
					adviseAdd(this.form).then(res => {
						console.log(res, res);
						this.getList()
						this.show = false
					})
				}else{
					adviseEdit(this.form).then(res => {
						console.log(res, res);
						this.getList()
						this.show = false
					})
				}
				
			},
			treeComit(e) {
				console.log(e, "e");
				this.form.deptId = e[0].id
				this.form.deptStr = e[0].label
				console.log(this.form);
			},
			btnAdd() {
				this.show = true
				this.form = {
					title: '', //会议主题
					content: '', //会议类型
					fileUrl: '',
					deptId: '', //会议部门
					fileUrlShow: '',
					deptStr: ''
				}
			},
			edit(row){
				 adviseGetInfo({id:row.id}).then(res=>{
					 console.log(res,"Res");
					 this.form = res.datas
					 this.show= true
				 })
			},
			del(row){
				  uni.showModal({
				  	title:"是否删除这条数据？",
					success: (res) => {
						if(res.confirm){
							adviseRemove({id:row.id}).then(res=>{
								uni.$u.toast('删除成功')
								this.getList()
							})
						}
						 console.log(res.confirm);
					}
				  })
			},
			treeAdd() {
				this.$refs.tree.itemclick(false, true)
			},
			getDept() {
				getListDeptForZTree().then((res) => {
					console.log(res);
					this.treeData = res.datas.map(ele => this.treeStructure(ele));
					console.log(this.treeData, "treeData");
				});
			},
			treeStructure(ele) {
				const haveChildren = Array.isArray(ele.children) && ele.children.length > 0;
				return {
					id: ele.value,
					label: ele.label,
					checked: false,
					children: haveChildren ? ele.children.map(i => this.treeStructure(i)) : [],
				}
			},
			async getList() {
				adviseList({
					PAGE_NO: 1,
					PAGE_SIZE: 100000,
					...this.query,
				}).then(res => {
					console.log(res, "res");
					this.datas = res.rows
				})
			},
			upload() {
				uni.chooseFile({
					count: 1,
					type: 'all',
					success: (res) => {
						console.log(res, "res");
						// 选择成功，获取文件路径
						const filePath = res.tempFilePaths[0];
						const fileName = res.tempFiles[0].name;
						uni.showLoading({
							title: '上传中'
						})
						const fileType = res.tempFiles[0].type;
						if (fileType.startsWith('image/')) {
							let that = this;
							this.$refs.helangCompress
								.compress(res.tempFiles[0], that, 1)
								.then((uploadRes) => {
									console.log(uploadRes, "res");
									this.form.fileUrl = uploadRes.datas.file_url
									this.form.fileUrlShow = uploadRes.datas.file_path
									this.$forceUpdate()
								});
						} else {
							uni.uploadFile({
								url: this.baseUrl + '/sys/file/uploadFile', // 替换为实际的上传接口地址
								filePath: filePath,
								name: 'file',
								formData: {
									fileName: fileName // 将文件名作为参数传递给接口
								},
								header: {
									'User-Token': uni.getStorageSync('token') || "",
								},
								success: (uploadRes) => {
									console.log('上传成功', JSON.parse(uploadRes.data));
									this.form.fileUrlShow = JSON.parse(uploadRes.data).datas
										.file_path
									this.form.fileUrl = JSON.parse(uploadRes.data).datas.file_url
									uni.hideLoading()
								},
								fail: (err) => {
									// 上传失败，处理错误信息
									console.log('上传失败', err);
									uni.hideLoading()
								}
							});
						}
						// 调用上传文件接口
					},
					fail: (err) => {
						// 选择失败，处理错误信息
						console.log('选择文件失败', err);
						uni.$u.toast(err)
					}
				});
			},
		}
	}
</script>

<style>
	page {
		background-color: #F6F6F6;
	}
</style>
<style lang="scss" scoped>
	.search {

		/deep/.u-input {
			width: 688rpx;
			height: 65rpx;
			background: #FFFFFF;
			border: 1rpx solid #CCCCCC;
			margin: 0 auto;
			margin-top: 15rpx;
			border-radius: 32rpx;
		}

		&_btn {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 29rpx;
			color: #666666;
			padding-left: 10rpx;
			border-left: 1rpx solid #E0E0E0;
		}
	}

	.box {
		width: 721rpx;
		background: #FFFFFF;
		margin: 0 auto;
		margin-top: 23rpx;
		border-radius: 15rpx;
		padding: 20rpx 20rpx;

		&_herder {
			padding: 30rpx 15rpx 25rpx 15rpx;
			border-bottom: 1rpx solid #F5F5F5;

			&_left {
				font-weight: 400;
				font-size: 33rpx;
				color: #1F1F1F;
				font-style: normal;
			}

			&_right {
				background: #FFDFDC;
				border-radius: 10rpx;
				border: 1rpx solid #E04734;
				padding: 14rpx 18rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 25rpx;
				color: #E04734;
			}

			&_right1 {
				background: #FFECDC;
				border-radius: 10rpx;
				border: 1rpx solid #E08A34;
				padding: 14rpx 18rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 25rpx;
				color: #E08A34;
			}
		}

		&_item {
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			padding: 0 15rpx;

			&_btn {
				margin-top: 30rpx;
				border-top: 1rpx solid #F5F5F5;
				display: flex;
				// justify-content: right;
				padding-top: 33rpx;
				padding-bottom: 23rpx;
				// padding-right: 30rpx;
				justify-content: flex-end;

				&_left {
					width: 171rpx;
					height: 63rpx;
					background: #F6A234;
					border-radius: 31rpx;

					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 25rpx;
					color: #FFFFFF;
					line-height: 63rpx;
					text-align: center;
					// margin-right: 38rpx;
				}

				&_right {
					width: 171rpx;
					height: 63rpx;
					background: #267DFF;
					border-radius: 31rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 25rpx;
					color: #FFFFFF;
					line-height: 63rpx;
					text-align: center;
					font-style: normal;
					margin-left: 38rpx;
				}
			}
		}

		&_label {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 29rpx;
			color: #999999;
		}

		&_value {
			font-weight: 400;
			font-size: 29rpx;
			color: #1F1F1F;
		}
	}

	/deep/.placeholderClass {
		font-weight: 400;
		font-size: 33rpx;
		color: #CCCCCC;
	}

	.btnAdd {
		width: 100%;
		background-color: #267DFF;
		color: #FFFFFF;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		position: fixed;
		bottom: 0;
	}

	.block {
		width: 690rpx;
		background-color: #FFF;
		border-radius: 10rpx;
		padding-bottom: 0;

		&_box {
			padding: 30rpx 60rpx;
		}

		&_item {
			display: flex;
			align-items: center;
			margin-top: 20rpx;

		}

		&_label {
			font-size: 29rpx;
			margin-right: 20rpx;
		}

		&_val {
			flex: 1;
		}

		.input {
			width: 100%;
			border: 1rpx solid #dadbde;
			padding: 6rpx 10rpx;
			border-radius: 4rpx;
		}

		.textarea {
			width: 100%;
			border: 1rpx solid #dadbde;
			border-radius: 4rpx;
			padding: 6rpx 10rpx;
		}

		&_btn {
			border-top: 1rpx solid #E6E6E6;
			height: 88rpx;
			margin-top: 30rpx;

			&_left {
				flex: 1;
				text-align: center;
				line-height: 88rpx;
				border-right: 1rpx solid #E0E0E0;

				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 33rpx;
				color: #000000;
			}

			&_right {
				flex: 1;
				text-align: center;
				line-height: 88rpx;


				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 33rpx;
				color: #3388FF;
			}
		}
	}

	.item_upload {
		width: 240rpx;
		height: 70rpx;
		background: #267DFF;
		text-align: center;
		line-height: 70rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 29rpx;
		color: #FFFFFF;
	}
</style>